<template>
	<view class="text-white vh-100 flex flex-column ">
		<view class="p-12 fs-14 flex flex-x-space-between ">
			<text class="">提现方式:</text>
			<view class="flex flex-y-center gap-6" @click="popup.open()">
				<!-- <text class="iconfont icon-weixin bg-white round-circle fs-30" style="color:#28c445"></text> -->
				<view v-if="selected.value==1">
					<image src="/static/image/wx.png" class="w-26 h-26" v-if="WEBCONFIG?.withdrawal_type==0"></image>
					<image src="/static/image/skf.png" class="w-26 h-26 " v-if="WEBCONFIG?.withdrawal_type==1"></image>
				</view>
				<image v-else src="/static/image/zfb.png" class="w-26 h-26 "></image>

				<text v-if="WEBCONFIG?.withdrawal_type==0">微信余额</text>
				<text v-if="WEBCONFIG?.withdrawal_type==1">二维码打款</text>
				<text class="iconfont icon-jiantou-heise fs-10 fw-300"></text>
			</view>
		</view>
		<view class="bg-grey-3 px-24 py-26 round-top-12 flex-1 ">
			<text>提现金额</text>
			<view class="flex gap-8 flex-y-center">
				<text class=" fs-30">￥</text>
				<view class="flex-1">
					<input placeholder="请输入提现金额" v-model="form.price" />
				</view>
				<text class="fs-14 text-green" @click="form.price=USERINFO.balance">全部提现</text>
			</view>
			<view class="mt-10 fs-14">
				<text class="text-grey-1">可提现金额：</text>

				<text class="text-brown-1">
					{{USERINFO?.balance}}
				</text>
			</view>

			<view class="mt-30" v-if="selected.value==2">
				<view class="border-grey-5 p-12 round-8 fs-14">
					<input placeholder="请输入支付宝账号"  v-model="form.username"/>
				</view>
				<view class="border-grey-5 p-12 round-8 fs-14 mt-25">
					<input placeholder="请输入真实姓名"  v-model="form.name"/>
				</view>
			</view>
			<view class="flex flex-center flex-column gap-10 mt-30 py-30 border-grey-5 round-8"
				style="border-style: dashed;" v-if="selected.value==1&&WEBCONFIG?.withdrawal_type==1" @click="upload">

				<image src="/static/image/scewm.png" class="w-90 h-100" v-if="form.qrcode==''"></image>
				<image v-else :src="form.qrcode" class="w-100 h-150 round-8"></image>
				<text class="fs-15">点击上传收款码</text>
			</view>
		</view>
		<view class="absolute bottom-0 left-0 right-0 px-24 text-center"
			:style="`padding-bottom:${GLOBAL.safeBottom}px;`">
			<view class="bg-green py-11 round-8  text-black" @click="sbumit">立即提现</view>

		</view>
		<y-popup ref="popup" background-color="#fff" round='12' mode='bottom'>
			<view class="text-black">
				<view class="fs-20 fw-700 text-center py-10">选择提现方式</view>
				<view class="py-18 px-20 flex flex-y-center gap-20" v-for="(item,index) in typeList"
					@click="select(item)">
					<image class="w-26  h-26" :src="item.image"></image>
					<view class="flex-1">{{item.name}}</view>
					<image src="/static/image/gx.png" class="w-20 h-20" v-if="selected.value==item.value"></image>
				</view>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { onMounted, reactive, ref } from 'vue';
	import { useRefs, useGlobalStore, useUserStore, useWebConfigStore } from '@/stores'
	import { $http, $page, $tool } from '@/utils';
	const { GLOBAL } = useRefs(useGlobalStore())
	const { USERINFO } = useRefs(useUserStore())
	const { getUserInfo } = useUserStore()
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const popup = ref(null)
	const typeList = reactive([
		{ name: '微信', value: 1, image: '/static/image/wx.png' },
		{ name: '支付宝', value: 2, image: '/static/image/zfb.png' },
	])
	const selected = ref({ name: '微信', value: 1, image: '/static/image/wx.png' });

	const form = ref({
		method: 1,
		price: '',
		qrcode: '',
		name: '',
		username: ''
	})
	const sbumit = () => {
		if (form.value.method==1&& WEBCONFIG.value.withdrawal_type == 1 && form.value.qrcode == '') {
			return $tool.toast('请上传收款码')
		}

		if ((USERINFO.value.balance * 1) < (form.value.price * 1)) {
			return $tool.toast('余额不足')
		}
		uni.showLoading({
			title: '请稍后...'
		})
		$http.post('Withdrawal/withdrawal', form.value).then(res => {
			getUserInfo()
			$tool.toast('发起提现成功');
			setTimeout(() => {
				$page.back()
			}, 500)
		})
	}
	const select = (e) => {
		selected.value = e
		form.value.method = e.value
		popup.value.close()
	}

	const upload = () => {
		uni.chooseImage({
			count: 1,
			success(res) {
				$http.upload('upload/Upload', {
					filePath: res.tempFilePaths[0],
					name: 'file',
					is_hide: 1
				}).then(res => {
					form.value.qrcode = res.data.url
				})
			}
		})

	}
</script>

<style>

</style>